import React, {Component} from 'react'
import {Card} from 'antd'
import {connect} from 'react-redux'
import {withRouter} from 'react-router-dom'
import UrlPattern from 'url-pattern'
import '../../../less/index.less'
import SuggestionBox from './suggestion-box'
import TaskContentBox from './task-content-box'
import * as taskActions from '../../../actions/task'
import FlipPages from './flip-pages'
import { FormattedMessage } from 'react-intl'
import {getLangFromLocalStorage} from '../../../constant/lang-util'

class Task extends Component {
  constructor (props) {
    super(props)
    this.state = {
      showFeedbackInput: false,
      taskId: -1,
      programId: 1
    }
  }

  componentDidMount () {
    const pattern = new UrlPattern('/student/program/:programId/task/:taskId')
    const urlParams = pattern.match(this.props.location.pathname) || {}
    const taskId = urlParams.taskId
    this.setState({
      programId: urlParams.programId,
      taskId
    })
    this.props.getTaskInfo(taskId)
    this.props.getTaskAssignments(taskId)
    this.props.getFlipTask(taskId)
    this.props.getTasksContentReadByTaskId(taskId)
  }

  flipTask (type) {
    const {flipIds, history} = this.props
    const {programId} = this.state
    const currentId = type === 'next' ? flipIds.nextId : flipIds.previousId
    this.props.getTaskInfo(currentId)
    this.props.getFlipTask(currentId)
    this.props.getTaskAssignments(currentId)

    history.push(`/student/program/${programId}/task/${currentId}`)
  }
  handleContentRead () {
    const {taskId} = this.state
    this.props.addTasksContentRead(taskId)
  }

  render () {
    const {flipIds, taskInfo} = this.props
    const {task, taskContentRead} = taskInfo
    const title = task[`title_${getLangFromLocalStorage()}`] || task.title
    const link = <a target='_self' href={task.link}><FormattedMessage id='论坛答疑' /></a>

    return (
      <Card title={title} noHovering bordered={false} extra={task.link ? link : ''}
        key={task.id}
        id='task'>
        <TaskContentBox
          taskInfo={taskInfo}
          programId={this.state.programId}
          taskContentRead={taskContentRead}
          handleContentRead={this.handleContentRead.bind(this)}
        />
        <SuggestionBox taskId={task.id} />
        <FlipPages flipTask={this.flipTask.bind(this)} flipIds={flipIds} />
      </Card>
    )
  }
}

const mapStateToProps = ({taskInfo, flipPages}) => ({
  taskInfo,
  flipIds: flipPages
})
const mapDispatchToProps = dispatch => ({
  getTaskInfo: (taskId) => dispatch(taskActions.getTaskInfo(taskId)),
  getFlipTask: (taskId) => dispatch(taskActions.getFlipTask(taskId)),
  getTaskAssignments: (taskId) => dispatch(taskActions.getStudentTaskAssignments(taskId)),
  getTasksContentReadByTaskId: (taskId) => dispatch(taskActions.getTasksContentReadByTaskId(taskId)),
  addTasksContentRead: (taskId) => dispatch(taskActions.addTasksContentRead(taskId))
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Task))
